<template>
	<view class="main">
    <view class="tit-box" v-if="detail.goods&&tip_show">
      <url-image class="tip-icon" src="/static/images/member/pay/tip-icon.png" width="35" height="34"></url-image>
      <span>支付成功，{{detail.card_type|card_type}}商品礼包券到账可能存在延迟</span>
    </view>
    <view class="pay-box">
      <view class="price-box">
        <text class="txt1">￥</text>
        <text class="txt2">{{detail.pay_price|formatMoney}}</text>
      </view>
      <view class="goods" v-if="detail.goods">
        <url-image class="goods-img" :src="detail.goods.goods_pic" @click="toGoods(detail.goods)"/>
        <view class="center">
          <view class="name">{{detail.goods.goods_title}}</view>
          <view class="time">{{detail.coupon_start_time|formatDate('yyyy.MM.dd')}} - {{detail.coupon_end_time|formatDate('yyyy.MM.dd')}}</view>
        </view>
        <view 
         :class="['btn', coupon_hide?'':'active']" @click="use_coupon(detail)">
         {{detail.coupon_state|getStateStr}}
        </view>
      </view>
      <view class="pay-detail">
        <view class="detail-box">
          <view class="name">当前状态</view>
          <view class="value">{{detail.order_status|orderStatus}}</view>
        </view>
        <view class="detail-box">
          <view class="name">支付方式</view>
          <view class="value">{{detail.pay_type|payType}}</view>
        </view>
        <view class="detail-box">
          <view class="name">支付时间</view>
          <view class="value">{{detail.pay_time|formatDate}}</view>
        </view>
        <view class="detail-box">
          <view class="name">支付单号</view>
          <view class="value">{{detail.pay_no}}</view>
        </view>
      </view>
      <view class="pay-detail">
        <view class="detail-box">
          <view class="name">会员类型</view>
          <view class="value">{{detail.card_type|card_type}}</view>
        </view>
        <view class="detail-box">
          <view class="name">会员期限</view>
          <view class="value">{{detail.member_time}}{{detail.member_time_unit|member_time_unit}}</view>
        </view>
        <view class="detail-box" v-if="detail.giving_vip_card_num" @click="$navigateTo('/pagesMine/myBuddy/myVip/index')">
          <view class="name">赠送VIP卡</view>
          <view class="value">{{detail.giving_vip_card_num}}张</view>
          <url-image class="arrow" src="/static/images/member/pay/arrow.png" width="12" height="23"/>
        </view>
      </view>
    </view>
    <view class="yw-box">
      <text>对订单有疑问 联系客服</text>
    </view>
	</view>
</template>

<script>
  import sku_pay_mixin from '@/pagesMember/components/sku_pay_mixin.js'
  import { toGoods } from '@/utils/navigateTo'
	export default {
    mixins: [sku_pay_mixin],
		data() {
			return {
				detail:{},
        option:"",
			}
		},
    filters:{
      member_time_unit(value){
        switch (value){
          case 1:
            return "天"
            break;
          case 2:
            return "月"
            break;
          case 3:
            return "季"
            break;
          case 4:
            return "年"
            break;
          case 5:
            return "终身"
            break;
          default:
            return ""
            break;
        }
      },
      card_type(value){
        switch (value){
          case 1:
            return "VIP会员";
            break;
          case 2:
            return "钻石会员";
            break;
          default:
            return "";
            break;
        }
      },
      orderStatus(value){
        switch (value){
          case 0:
            return "未支付";
            break;
          case 1:
            return "支付成功";
            break;
          case 2:
            return "支付失败";
            break;
          case 3:
            return "支付超时";
            break;
          default:
            return "";
            break;
        }
      },
      payType(value){
        switch (value){
          case -1:
            return "未知";
            break;
          case 1:
            return "微信APP支付";
            break;
          case 2:
            return "微信H5支付";
            break;
          case 3:
            return "微信公众号(JSAPI)支付";
            break;
          case 4:
            return "支付宝APP支付";
            break;
          case 5:
            return "支付宝H5支付";
            break;
          case 6:
            return "微信小程序(JSAPI)支付";
            break;
          case 7:
            return "银联云闪付APP支付";
            break;
          case 8:
            return "银联微信APP支付";
            break;
          case 9:
            return "短信验证支付";
            break;
          default:
            return "";
            break;
        }
      },
      getStateStr(state){
        let map = {
          "COUPON_STATE_WAITING_FOR_USED": '立即提货',
          "COUPON_STATE_NOT_USED": '立即提货',
          "COUPON_STATE_USED": '查看订单',
          "COUPON_STATE_EXPIRED": '已过期',
          "COUPON_STATE_INVALID ": '已过期',
        }
        return map[state];
      },
    },
    computed:{
      coupon_hide(){
        return this.detail.coupon_state === 'COUPON_STATE_EXPIRED'|| this.detail.coupon_state === 'COUPON_STATE_INVALID';
      },
      tip_show(){
        return this.detail.coupon_state === 'COUPON_STATE_WAITING_FOR_USED'|| this.detail.coupon_state === 'COUPON_STATE_NOT_USED';
      }
    },
    onLoad(option) {
      this.option=option;
      if(option.orderNo){
      }else{
        this.$msg('未获取到订单号');
      }
    },
    onShow() {
      if(this.option.orderNo){
        this.get_detail(this.option.orderNo);
      }
    },
		methods: {
      //获取下单详情
			get_detail(orderNo){
        this.$api.memberApi.payRecordDetail({
          orderNo:orderNo
        }).then(res=>{
          if(res.code==0){
            this.detail=res.data;
          }
        })
      },
      //用券
      use_coupon(){
        let detail=this.detail;
        //使用优惠券
        if(detail.coupon_state==='COUPON_STATE_WAITING_FOR_USED'||detail.coupon_state==='COUPON_STATE_NOT_USED'){
          if(detail.goods){
            //直接跳转下单页,mixin混入
            this.go_order_pay({
              goods:detail.goods
            });
          }
        }
        //跳转订单详情
        else if(detail.coupon_state==='COUPON_STATE_USED'){
          this.$navigateTo('/pagesOrder/orderDetail/index?orderNo=' + detail.order_id);
        }
      },
      toGoods(item){
        toGoods(item);
      },
		}
	}
</script>

<style lang="scss" scoped>
.main{
  .tit-box{
      width: 750rpx;
      height: 74rpx;
      line-height: 74rpx;
      background: #FFF1D5;
      font-size: 24rpx;
      color: #BF8F40;
      .tip-icon{
        vertical-align: middle;
        margin-left: 30rpx;
      }
      span{
        margin-left: 15rpx;
      }
    }
  .pay-box{
    padding: 0rpx 44rpx;
    background-color: white;
    .price-box{
      text-align: center;
      padding: 71rpx 0rpx 54rpx;
      font-size: 58rpx;
      line-height: 68rpx;
    }
    .goods{
      display: flex;
      align-items: center;
      padding-bottom: 40rpx;
      border-bottom: 2rpx solid #EEEEEE;
      .goods-img{
        width: 100rpx;
        height: 100rpx;
        display: block;
      }
      .center{
        flex: 1;
        margin-left: 27rpx;
        margin-right: 30rpx;
        .name{
          font-size: 28rpx;
          line-height: 40rpx;
          color: #040404;
        }
        .time{
          font-size: 24rpx;
          color: #999999;
          margin-top: 10rpx;
          white-space: pre-wrap;
          word-break:break-all;
        }
      }
      .btn.active{
        background: #000000;
      }
      .btn{
        width: 150rpx;
        height: 65rpx;
        background: #DDDDDD;
        border-radius: 2rpx;
        font-size: 26rpx;
        color: #FEFDFD;
        line-height: 65rpx;
        text-align: center;
      }
    }
  }
  .pay-detail{
    padding: 56rpx 0rpx 32rpx;
    border-bottom: 2rpx solid #EEEEEE;
    &:last-child{
      border-bottom: none;
    }
    .detail-box{
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;
      .name{
        color: #999999;
        font-size: 24rpx;
        margin-right: 37rpx;
        margin-left: 12rpx;
        min-width: 95rpx;
      }
      .value{
        font-size: 24rpx;
        flex: 1;
      }
      .arrow{
        padding: 2rpx 20rpx;
      }
    }
  }
  .yw-box{
    display: flex;
    padding: 42rpx 50rpx;
    margin: 20rpx 0rpx;
    background-color: white;
    font-size: 24rpx;
    justify-content: space-between;
  }
}
</style>
